<template>
  <div class="main">
    <div class="content">
      <div class="left">
        <div class="logo">
          <img src="../assets/logo.png" />
        </div>
        <a-form :model="formState" name="form" autocomplete="off" @finish="onFinish">
          <a-form-item name="username" :rules="[{ required: true, message: '请输入内容' }]">
            <a-input v-model:value="formState.username">
              <template #addonBefore>
                <MobileOutlined />
              </template>
            </a-input>
          </a-form-item>

          <a-form-item name="password" :rules="[{ required: true, message: '请输入密码' }]">
            <a-input-password v-model:value="formState.password">
              <template #addonBefore>
                <LockOutlined />
              </template>
            </a-input-password>
          </a-form-item>

          <a-form-item name="remember">
            <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
          </a-form-item>

          <a-form-item>
            <a-button block type="primary" html-type="submit">立即登录</a-button>
          </a-form-item>
        </a-form>
        <div class="tips">
          仅用于IT培训教学使用，为保障您的个人信息安全，请勿向平台录入任何个人敏感信息（如手机号、身份证号等）！
        </div>
      </div>
      <div class="right">2</div>
    </div>
  </div>
</template>

<script setup>
import { MobileOutlined, LockOutlined } from '@ant-design/icons-vue'
import { reactive } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const formState = reactive({
  username: 'demo',
  password: '888itcast.CN764%...',
  remember: true
})

const onFinish = (values) => {
  console.log('Success:', values)
  router.push('/')
}
</script>

<style lang="scss">
.left {
  .ant-input-group-addon,
  .ant-input {
    height: 50px;
    .anticon svg {
      width: 20px;
      height: 20px;
      color: #b6abab;
    }
  }
  .ant-input-group-addon {
    width: 50px;
    background-color: #eae7e7;
  }
}
</style>

<style scoped lang="scss">
.main {
  background: #fdfafa;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}
.content {
  box-shadow: 0 0 20px rgba(93, 93, 93, 0.32941176470588235);
  background-color: #fff;
  border-radius: 40px;
  display: flex;
  .left {
    flex: 1;
    padding: 30px;
    width: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .logo {
      text-align: center;
      img {
        width: 150px;
        height: 64px;
      }
    }
    .ant-form {
      margin-top: 30px;
      width: 280px;
      .ant-btn-block {
        height: 50px;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        color: #332929;
        line-height: 22px;
      }
    }
    .tips {
      width: 280px;
      line-height: 20px;
      font-size: 14px;
      color: #fd3333;
      text-align: justify;
    }
  }
  .right {
    background-image: url(../assets/login.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 518px;
    width: 560px;
  }
}
</style>
